<template>
	<view class="s_container">
		<view class="txt_box">
			<view class="txt">限制金额：</view>
			<input type="digit" placeholder-class="account-txt" v-model="mount" class="uni-input" placeholder="输入每日限制金额(精确两位小数)" />
		</view>
		<view class="txt_box">
			<view class="txt">限制次数：</view>
			<input type="number" placeholder-class="account-txt" v-model="limitTimes " class="uni-input" placeholder="输入每日限制次数" />
		</view>
		<view> 
			<view class="txt">卡密码：</view>
			<input type="password" placeholder-class="account-txt" v-model="password" class="uni-input" placeholder="输入卡密码" />
		</view>
		<view class="hint">
			注: 金额或次数不输入将作为重置操作
		</view>
		<view class="a_content_btn">
			<button type="primary" class="btn_pri" style="background-color: #477EDA;" @click="toBind">确认提交</button>
		</view>
		<mcModal :isShow="showMcModal" :content="content" :title="title" :showCancel="false" @cancel='bb()' :inp="false" @ok='cc()' okCor='#333333' :okBtn='okBtn'></mcModal>
	</view>
</template>

<script>
	import {setMilkCardLimitAmount} from '../../common/api/index.js'
	import mcModal from '../../components/custom-modal/custom-modal.vue'
	import {
		_showToast,
	} from '../../common/js/util.js'
	export default {
		data() {
			return {
				mount: '',
				limitTimes : '',
				password: '',
				content: '',
				title: '',
				showMcModal: false,
				okBtn: '',
				obj: {}
			}
		},
		components: {
			mcModal
		},
		onLoad:function(option){
			this.obj = {...JSON.parse(decodeURIComponent(option.itemObj))}
			this.limitTimes = this.obj.limitTimes?this.obj.limitTimes:''
			this.mount = this.obj.limitAmount?this.obj.limitAmount:''
			console.log(this.obj)
		},
		methods: {
			bb() {
				this.showMcModal = false
			},
			cc() {
				this.showMcModal = false
				if(this.content == '设置成功') {
					uni.reLaunch({
						url: '/pageMilk/index/index'
					})
				} else {
					this.password = ''
				}
				
			},
			toBind() {
				if(!/^[0-9]+(.[0-9]{1,2})?$/.test(this.mount) && this.mount != ''){
					_showToast('请输入正确的金额数值')
					this.mount = ''
					return
				}
				if(!/^[0-9]*$/.test(this.limitTimes)){
					_showToast('请输入正确的次数数值')
					this.limitTimes = ''
					return
				}
				if(this.password == ''){
					_showToast('请输入正确的卡密码')
					return	
				}
				setMilkCardLimitAmount({
					orgId: this.obj.orgId,
					empId: this.obj.empId,
					cardNo: this.obj.cardNo,
					limitAmount: this.mount != '' ? this.mount : null,
					limitTimes: this.limitTimes != '' ? parseInt(this.limitTimes) : null,
					cardPwd: this.password,
					userId: uni.getStorageSync("s_userId")
				}).then(res => {
					if(res.code == 0) {
						this.showMcModal = true
						this.content = '设置成功'
						this.okBtn = '确认'
					} else {
						this.showMcModal = true
						this.content = res.msg
						this.okBtn = '确认'
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	.s_container {
		padding: 20px;
	}
	.txt_box {
		margin-bottom: 20rpx;
	}
	.account-txt {
		font-size: 28rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #adadad;
	}
	.txt {
		font-size: 36rpx;
		font-weight: bold;
		color: #000;
		margin-bottom: 10rpx;
	}
	.uni-input {
		padding: 10rpx;
		border: 1px solid #ddd;
	}
	.a_content_btn {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.btn_pri {
		margin-top: 100rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		width: 90%;
		font-size: 32rpx;
		font-family: "PingFangSC-Heavy, PingFang SC";
		font-weight: 600;
		color: #ffffff;
		background: linear-gradient(90deg, #0685ff 0%, #285eff 100%);
		box-shadow: 0px 8px 16px 0px rgba(36, 98, 255, 0.24);
		border-radius: 8rpx;
	}
	.hint{
		padding: 24rpx 0;
		color: #999;
		font-size: 24rpx;
	}
</style>
